<template>
    <uni-popup ref="popup" :is-mask-click="false">
        <view class="content">
            <div class="back" @click="backFunc" v-if="step > 1">
                <text class="iconfont icon-ai207"></text>
            </div>

            <div class="close" @click.stop="closeBox">
                <!-- <image :src="$webImg('sex_imgs/app/goods_clo.png')" mode="aspectFit"></image> -->
                <text class="iconfont">&#xeca0;</text>
            </div>

            <view class="step1 step" v-if="step == 1">
                <div class="left">
                    <img :src="$webImg('sex_imgs/app/boy.png')" mode="aspectFit" class="img" />
                </div>
                <div class="right">
                    <img :src="$webImg('sex_imgs/app/girl.png')" mode="aspectFit" class="img" />
                </div>

                <!-- <span class="tit-min">hi、完善信息</span> -->

                <div class="headimg">
                    <!-- <span class="tit">为您推荐更适合你的玩具</span> -->
                    <img :src="$webImg('sex_imgs/app/select_tit_img.png')" mode="aspectFit" class="img" />
                </div>

                <view class="btn-box">
                    <text class="sex-btn boy" :class="{ active: json.sex == 1 }" @click.stop="chooseFunc('sex', 1)">男士</text>

                    <text class="sex-btn girl" :class="{ active: json.sex == 2 }" @click.stop="chooseFunc('sex', 2)">女士</text>
                </view>
            </view>

            <div class="step step2" v-if="step == 2">
                <div>
                    <span class="tit">请完善您的信息</span>
                </div>
                <div class="form-content">
                    <div v-for="(item, idx) in infoMess" :key="idx">
                        <span class="tit">{{ item.tit }}</span>
                        <div class="select-btns">
                            <span v-for="item2 in item.list" class="btns" :class="{ active: json[item.key] == item2.select_id }" :key="item2.select_id" @click.stop="chooseFunc(item.key, item2.select_id)">
                                {{ item2.name }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="step step3" v-if="step == 3">
                <div>
                    <span class="tit">您感兴趣的玩具</span>
                </div>
                <div class="select-imgs">
                    <!-- <span class="tit">{{item.tit}}</span> -->
                    <div class="select-imgs-item" v-for="(item, idx) in goodsTypeArr" :class="{ active: item.checked }" :key="idx" @click.stop="chooseTypeFunc(item)">
                        <div class="imgBox">
                            <img :src="$webImg(item.img)" class="imgs no-check" mode="aspectFit" />
                            <img :src="$webImg(item.img2)" class="imgs check" mode="aspectFit" />
                        </div>

                        <span>{{ item.goods_name }}</span>
                    </div>
                </div>

                <div class="finish-btn" @click="goFinish">
                    <span>完成进入首页</span>
                </div>
            </div>

            <div class="step-box">
                <div class="step-line">
                    <span class="line" :class="'st' + step"></span>
                    <span class="step-words">
                        <span class="main-color">{{ step }}</span>
                        /3
                    </span>
                </div>
            </div>
        </view>
    </uni-popup>
</template>

<script>
    import uniPopup from '@/components/uni-popup/uni-popup/uni-popup';

    export default {
        props: ['initShow'],
        components: { uniPopup },
        data() {
            return {
                json: {
                    sex: undefined,
                    age: undefined,
                    qgzk: undefined,
                    isBug: undefined
                },
                step: 1, //当前步骤

                infoMess: [
                    {
                        selId: '0',
                        tit: '你的年龄',
                        key: 'age',
                        list: [
                            { select_id: 3, name: '18-23岁' },
                            { select_id: 4, name: '24-30岁' },
                            { select_id: 5, name: '31-40岁' },
                            { select_id: 6, name: '40+岁' }
                        ]
                    },
                    {
                        selId: '1',
                        tit: '你的感情状况',
                        key: 'qgzk',
                        list: [
                            { select_id: 7, name: '单身' },
                            { select_id: 8, name: '有伴侣' },
                            { select_id: 9, name: '已婚已育' }
                        ]
                    },
                    {
                        selId: '2',
                        tit: '购买过情趣玩具吗？',
                        key: 'isBug',
                        list: [
                            { select_id: 1, name: '未购买过' },
                            { select_id: 2, name: '购买过3次以内' },
                            { select_id: 3, name: '购买过3次及以上' }
                        ]
                    }
                ],
                toyGoods: [
                    {
                        type: 'man',
                        goods: [
                            {
                                img: 'sex_imgs/cate/man1-1.png',
                                img2: 'sex_imgs/cate/man1.png',
                                goods_name: '电动玩具',
                                checked: !1,
                                mta_name: 'diandongwanju'
                            },
                            {
                                img: 'sex_imgs/cate/man2-1.png',
                                img2: 'sex_imgs/cate/man2.png',
                                goods_name: '仿真名器',
                                checked: !1,
                                mta_name: 'fangzhenmingqi'
                            },
                            {
                                img: 'sex_imgs/cate/man3-1.png',
                                img2: 'sex_imgs/cate/man3.png',
                                goods_name: '逼真倒模',
                                checked: !1,
                                mta_name: 'bizhendaomo'
                            },
                            {
                                img: 'sex_imgs/cate/man4-1.png',
                                img2: 'sex_imgs/cate/man4.png',
                                goods_name: '后庭按摩',
                                checked: !1,
                                mta_name: 'houtinganmo'
                            },
                            {
                                img: 'sex_imgs/cate/man5-1.png',
                                img2: 'sex_imgs/cate/man5.png',
                                goods_name: '延时持久',
                                checked: !1,
                                mta_name: 'yanshichijiu'
                            },
                            {
                                img: 'sex_imgs/cate/man6-1.png',
                                img2: 'sex_imgs/cate/man6.png',
                                goods_name: '增长增粗',
                                checked: !1,
                                mta_name: 'zengchangzengcu'
                            },
                            {
                                img: 'sex_imgs/cate/man7-1.png',
                                img2: 'sex_imgs/cate/man7.png',
                                goods_name: '双人调情',
                                checked: !1,
                                mta_name: 'shuangrentiaoqing'
                            },
                            {
                                img: 'sex_imgs/cate/man8-1.png',
                                img2: 'sex_imgs/cate/man8.png',
                                goods_name: '润滑清洁',
                                checked: !1,
                                mta_name: 'runhuaqingjie'
                            },
                            {
                                img: 'sex_imgs/cate/man9-1.png',
                                img2: 'sex_imgs/cate/man9.png',
                                goods_name: '快感提升',
                                checked: !1,
                                mta_name: 'kuaigantisheng'
                            }
                        ]
                    },
                    {
                        type: 'wom',
                        goods: [
                            {
                                img: 'sex_imgs/cate/wom1-1.png',
                                img2: 'sex_imgs/cate/wom1.png',
                                goods_name: '吮吸器',
                                checked: !1,
                                mta_name: 'shunxiqi'
                            },
                            {
                                img: 'sex_imgs/cate/wom2-1.png',
                                img2: 'sex_imgs/cate/wom2.png',
                                goods_name: '入体棒类',
                                checked: !1,
                                mta_name: 'rutibanglei'
                            },
                            {
                                img: 'sex_imgs/cate/wom3-1.png',
                                img2: 'sex_imgs/cate/wom3.png',
                                goods_name: '丁丁',
                                checked: !1,
                                mta_name: 'dingding'
                            },
                            {
                                img: 'sex_imgs/cate/wom4-1.png',
                                img2: 'sex_imgs/cate/wom4.png',
                                goods_name: '后庭玩具',
                                checked: !1,
                                mta_name: 'houtingwanju'
                            },
                            {
                                img: 'sex_imgs/cate/wom5-1.png',
                                img2: 'sex_imgs/cate/wom5.png',
                                goods_name: '双人调情',
                                checked: !1,
                                mta_name: 'shuangrentiaoqing'
                            },
                            {
                                img: 'sex_imgs/cate/wom6-1.png',
                                img2: 'sex_imgs/cate/wom6.png',
                                goods_name: '安全润滑',
                                checked: !1,
                                mta_name: 'anquanrunhua'
                            },
                            {
                                img: 'sex_imgs/cate/wom7-1.png',
                                img2: 'sex_imgs/cate/wom7.png',
                                goods_name: '快感提升',
                                checked: !1,
                                mta_name: 'kuaigantisheng'
                            },
                            {
                                img: 'sex_imgs/cate/wom8-1.png',
                                img2: 'sex_imgs/cate/wom8.png',
                                goods_name: '情趣内衣',
                                checked: !1,
                                mta_name: 'qingquneiyi'
                            },
                            {
                                img: 'sex_imgs/cate/wom9-1.png',
                                img2: 'sex_imgs/cate/wom9.png',
                                goods_name: '挑逗跳蛋',
                                checked: !1,
                                mta_name: 'tiaodoutiaodan'
                            }
                        ]
                    }
                ],
                goodsTypeArr: []
            };
        },

        onShow() {},
        mounted() {
            //是否进来就提示 默认为false
            // this.openFunc();
        },
        methods: {
            openFunc() {
                this.$refs['popup'].open();
            },
            closeBox() {
                this.$refs['popup'].close();
            },
            backFunc() {
                this.step = this.step - 1;
            },
            chooseFunc(key, value) {
                this.$set(this.json, key, value);

                if (key == 'sex') {
                    this.step = 2;

                    this.goodsTypeArr = this.toyGoods[value - 1].goods;
                } else {
                    let bool = true;

                    Object.keys(this.json).map(key => {
                        if (!this.json[key]) {
                            bool = false;
                        }
                    });

                    if (bool) {
                        this.step = 3;
                    }
                }
            },
            chooseTypeFunc(item) {
                this.$set(item, 'checked', !item.checked);
            },
            goFinish() {
                this.$emit('finish');

                this.closeBox();
            }
        }
    };
</script>

<style scoped lang="scss">
    .content {
        width: 85vw;
        position: relative;
        background: #fff;
        border-radius: 13px;
        // padding: 10px;
        text-align: center;
        padding-top: 40rpx;
        .close {
            position: absolute;
            right: 24rpx;
            top: 20rpx;
            z-index: 10;
            .iconfont {
                width: 60rpx;
                height: 60rpx;
                text-align: center;
                font-size: 40rpx;
                color: #999;
            }
        }
        .back {
            position: absolute;
            left: 24rpx;
            top: 24rpx;
            z-index: 10;
            .iconfont {
                width: 60rpx;
                height: 60rpx;
                text-align: center;
                font-size: 60rpx;
                color: #ffd1d1;
            }
        }
        .tit-min {
            font-size: 24rpx;
            color: #000;
            margin-bottom: 8rpx;
        }
        .tit {
            color: #000;
            font-size: 36rpx;
            font-weight: bold;
        }
    }

    .step1 {
        position: relative;
        overflow: hidden;
        padding: 180rpx 100rpx 150rpx;
        // border-radius: 13px;
        .headimg {
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
            img {
                width: 100%;
                height: 90px;
            }
        }
        .left {
            position: absolute;
            left: -80px;
            bottom: -170px;
            z-index: 10;
            .img {
                width: 120px;
                height: 300px;
                transform: rotate(30deg);
            }
        }
        .right {
            position: absolute;
            right: -110px;
            bottom: -10px;
            z-index: 10;
            .img {
                width: 120px;
                height: 300px;
                transform: rotate(-30deg);
            }
        }

        .btn-box {
            margin-top: 100rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .sex-btn {
                width: 170rpx;
                height: 112rpx;
                line-height: 112rpx;
                border-radius: 12rpx;
                text-align: center;
                font-size: 15px;
                margin: 0 20rpx;
                border: 4rpx solid #eaedee;
                background: #f8fffe;
                color: #9fa4a5;
            }
            .boy.active {
                background: rgb(154, 220, 236);
                color: #fff;
            }
            .girl.active {
                background: rgb(231, 117, 125);
                color: #fff;
            }
        }
    }

    .step-box {
        position: relative;
        width: 100%;
        height: 30px;
        border-radius: 20px;
        overflow: hidden;
        // background: #eaeaea;
        .line {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: #ffd1d1;
            border-radius: 8px;
            &::before {
                position: absolute;
                left: 0;
                top: 0;
                content: '';
                width: 0%;
                height: 100%;
                background: #e7757d;
                border-radius: 8px;
                transition: all 0.2s;
            }
            &.st1 {
                &::before {
                    width: 33.3%;
                }
            }
            &.st2 {
                &::before {
                    width: 66.6%;
                }
            }
            &.st3 {
                &::before {
                    width: 100%;
                }
            }
        }
    }
    .form-content {
        text-align: left;
        padding: 10px 30px;
        .tit {
            font-size: 34rpx;
        }
        .select-btns {
            padding-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .btns {
                margin-bottom: 10px;
                width: 45%;
                height: 68rpx;
                line-height: 68rpx;
                border-radius: 20rpx;
                text-align: center;
                font-size: 13px;
                border: 4rpx solid #eaedee;
                background: #fbf0f0;
                color: #9fa4a5;
                &.active {
                    background: #e7757d;
                    color: #fff;
                }
            }
        }
    }
    .select-imgs {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 30px 34px 5px;
        .select-imgs-item {
            text-align: center;
            margin-bottom: 20px;
            width: 33.33%;
            .imgBox {
                margin: 0 auto 10px;
                width: 66px;
                height: 66px;
                line-height: 66px;
                .imgs {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
                .check {
                    display: none;
                }
            }
            &.active {
                .check {
                    display: block;
                }
                .no-check {
                    display: none;
                }
            }
        }
    }
    .finish-btn {
        display: block;
        width: 74%;
        height: 46px;
        line-height: 46px;
        border-radius: 50px;
        text-align: center;
        font-size: 16px;
        margin: 10px auto;
        background: #ffd1d1;
        color: #222;
        font-weight: bold;
    }
</style>
